useImperativeHandle

useImperativeHandle 소개

useImperativeHandle은 React의 훅(hook) 중 하나로, 부모 컴포넌트가 자식 컴포넌트의 특정 기능을 직접적으로 제어할 수 있게 해줍니다. 일반적으로, 자식 컴포넌트는 자신의 내부 상태를 관리하고, 부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 전달합니다. 하지만 useImperativeHandle을 사용하면 자식 컴포넌트가 제공하는 기능을 부모 컴포넌트가 직접 호출할 수 있게 됩니다.

사용법

다음은 useImperativeHandle의 기본 사용법입니다. 이 예제에서는 부모 컴포넌트가 자식 컴포넌트의 focus 메서드를 직접 호출하여 자식 컴포넌트의 input 요소에 포커스를 줄 수 있게 합니다.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

// 자식 컴포넌트
const ChildInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});

// 부모 컴포넌트
const ParentComponent = () => {
  const inputRef = useRef();

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <ChildInput ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

위 코드에서 ChildInput 컴포넌트는 useImperativeHandle을 사용하여 부모 컴포넌트가 호출할 수 있는 focus 메서드를 제공합니다. 부모 컴포넌트인 ParentComponent는 inputRef.current.focus()를 호출하여 자식 컴포넌트의 input 요소에 포커스를 줄 수 있습니다.

주의할 점

최소한으로 사용하기: useImperativeHandle은 직접적인 DOM 접근을 허용하기 때문에, 이를 남용하면 컴포넌트 간의 결합도가 높아질 수 있습니다. 필요할 때만 사용하고, 가능하면 props와 state를 통해 데이터를 전달하는 것이 좋습니다.
forwardRef와 함께 사용: useImperativeHandle을 사용할 때는 forwardRef와 함께 사용해야 합니다. forwardRef는 부모 컴포넌트가 자식 컴포넌트에 ref를 전달할 수 있게 합니다.
캡슐화 유지: 자식 컴포넌트는 자신의 내부 로직을 최대한 캡슐화해야 하며, useImperativeHandle을 통해 제공하는 메서드는 신중하게 선택해야 합니다.

더 알아보기

forwardRef: 부모 컴포넌트가 자식 컴포넌트에 ref를 전달할 수 있게 해주는 React 함수.
useRef: React 훅으로, 변수를 저장하고 DOM 요소에 접근하는 데 사용.
React 공식 문서: useImperativeHandle, forwardRef

내용 요약

useImperativeHandle은 부모 컴포넌트가 자식 컴포넌트의 기능을 직접 제어할 수 있게 해주는 React 훅입니다. forwardRef와 함께 사용하여 자식 컴포넌트의 특정 메서드를 부모 컴포넌트에서 호출할 수 있습니다. 하지만, 이 훅은 신중하게 사용해야 하며, 가능한 경우 props와 state를 통해 데이터와 기능을 전달하는 것이 바람직합니다.